<template>
  <div>
    <h3>购物车页面</h3>
    <br /><br /><br /><br /><br /><br />
    <el-table :data="Shopp_list" height="400" border style="width: 100%">
      <el-table-column label="图片展示" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.dishes.dishes_img"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="dishes.dishes_price"
        label="菜品价格"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="dishes.dishes_name"
        label="菜品名称"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="num" label="菜品数量" align="center">
        <template #default="scope">
          <el-button
            type="warning"
            icon="el-icon-plus"
            circle
            @click="jia(scope.row.id)"
          ></el-button
          >&emsp; <span>{{ scope.row.num }}</span
          >&emsp;
          <el-button
            type="warning"
            icon="el-icon-minus"
            circle
            @click="jian(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>

      <el-table-column label="总价" align="center">
        <template #default="scope">
          {{
            (scope.row.dishes.dishes_price * scope.row.num).toFixed(2)
          }}</template
        >
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <form action="" class="asd">总价￥{{ monye }}</form>

    <el-button type="success" round @click="address">支付</el-button>

    <el-dialog title="收货地址" :visible.sync="FormVisible">
      <el-form>
        <el-form-item label="选择收货地址">
          <select v-model="address_id">
            <option
              v-for="(item, i) in address_list"
              :key="i"
              :label="item.address"
              :value="item.id"
            ></option>
          </select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="FormVisible = false">取 消</el-button>

        <el-button type="primary" @click="ordershopp(address_id)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      FormVisible: false,
      address_list: [],
      Shopp_list: [],
      userinfo: [],
      uid: "",
      id: "",

      address_id: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    Axios.get("http://127.0.0.1:8000/user/address/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取用户的收货地址>>", res);
      this.address_list = res.data.data;
    });
    Axios.get("http://127.0.0.1:8000/user/infolist/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      this.uid = res.data.userinfo.id;
      console.log("获取登录用户的信息>>", res);
      // this.ints = res.data.userinfo;
    });
    Axios.get("http://127.0.0.1:8000/customer/shopp/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取购物车信息>>", res);
      this.Shopp_list = res.data.data;
    });
  },

  methods: {
    jia(id) {
      Axios.post("http://127.0.0.1:8000/customer/shoppjia/" + id + "/", {
        uid: this.uid,
        cid: id,
      }).then((res) => {
        console.log("数据加一", res);
        Axios.get("http://127.0.0.1:8000/customer/shopp/", {
          headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
          //   console.log("获取购物车信息>>", res);
          this.Shopp_list = res.data.data;
        });
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "菜品数量添加成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    jian(id) {
      Axios.post("http://127.0.0.1:8000/customer/shojian/" + id + "/", {
        uid: this.uid,
        cid: id,
      }).then((res) => {
        console.log("数据减一", res);
        Axios.get("http://127.0.0.1:8000/customer/shopp/", {
          headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
          //   console.log("获取购物车信息>>", res);
          this.Shopp_list = res.data.data;
        });
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "菜品数量减少",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    del(id) {
      Axios.delete("http://127.0.0.1:8000/customer/shopp/" + id + "/").then(
        (res) => {
          console.log("删除购物车的响应>>", res);
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: "删除成功！",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.statusText,
            });
          }
          Axios.get("http://127.0.0.1:8000/customer/shopp/", {
            headers: { token: localStorage.getItem("token") || "" },
          }).then((res) => {
            // console.log("获取购物车信息>>", res);
            this.Shopp_list = res.data.data;
          });
        }
      );
    },
    address() {
      this.FormVisible = true;
    },
    ordershopp(id) {
      this.FormVisible = false;
      console.log("11111", id);
      Axios.post("http://127.0.0.1:8000/customer/order_add/", {
        add_id: id,
        uid: this.uid,
        // headers: { token: localStorage.getItem("token") || "" },
        monye: this.monye,
      }).then((res) => {
        console.log("订单响应>>", res);
        if (res.data.code == 200) {
          setTimeout((window.location.href = res.data.url), 2000);
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
  },

  // 计算商品总价
  computed: {
    monye: function () {
      let m = 0;
      for (let i = 0; i < this.Shopp_list.length; i++) {
        m += this.Shopp_list[i].num * this.Shopp_list[i].dishes.dishes_price;
      }
      return m.toFixed(2);
    },
  },

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
* {
  margin: 0;
}
.asd {
  color: red;
  font-size: 30px;
}
</style>
